<template>
    <van-popup :show="show" round class="p-3" @click-overlay="closeModal">
        <div class="text-center text-black mb-2 text-xl">编辑代付报备信息</div>
        <form @submit.prevent="submitAdd">
            <div class="flex text-sm my-2">
                <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
                    选择代付类型
                </div>
                <input class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm" placeholder="请选择代付类型"
                    type="text" v-model="formRef.codeName" required readonly @click="showPicker = true" />

                <van-popup teleport="#app" v-model:show="showPicker" destroy-on-close round position="bottom">
                    <van-picker title="选择代付类型" :columns="codeInfo" @confirm="onPickerComfirm"
                        :columns-field-names="{ text: 'title', value: 'code' }" @cancel="showPicker = false" />
                </van-popup>
            </div>

            <van-popover>
                <div class="p-2 text-sm text-gray-500">请输入报备姓名</div>
                <template #reference>
                    <div class="flex text-sm my-2">
                        <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
                            请输入报备姓名
                        </div>
                        <input class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm"
                            placeholder="请输入要报备的代付姓名" type="text" v-model="formRef.name" required />
                    </div>
                </template>
            </van-popover>

            <van-popover>
                <div class="p-2 text-sm text-gray-500">请输入报备账号</div>
                <template #reference>
                    <div class="flex text-sm my-2">
                        <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
                            请输入报备账号
                        </div>
                        <input class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm"
                            placeholder="请输入要报备的代付的账号" type="text" v-model="formRef.account" required />
                    </div>
                </template>
            </van-popover>

            <van-popover>
                <div class="p-2 text-sm text-gray-500">请输入报备银行名称</div>
                <template #reference>
                    <div class="flex text-sm my-2">
                        <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
                            请输入报备银行名称
                        </div>
                        <input class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm"
                            placeholder="请输入要报备的代付银行名称" type="text" v-model="formRef.bank" required />
                    </div>
                </template>
            </van-popover>

            <van-popover>
                <div class="p-2 text-sm text-gray-500">添加备注</div>
                <template #reference>
                    <div class="flex text-sm my-2">
                        <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
                            添加备注
                        </div>
                        <input class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm"
                            placeholder="请输入备注信息" type="text" v-model="formRef.remark" />
                    </div>
                </template>
            </van-popover>

            <div class="text-center flex justify-between items-center my-2 mt-4">
                <button @click="closeModal" type="button" class="rounded bg-[#EFEFEF] text-black py-1 px-3">
                    取消
                </button>
                <button type="submit" class="rounded bg-[#70BABC] text-white py-1 px-3">
                    确认
                </button>
            </div>
        </form>
    </van-popup>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { GetPaymentCodeApi, EditReportApi } from '@/apis/payment';
import { showSuccessToast } from 'vant';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    item: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const emit = defineEmits(['close', 'confirm'])

const showPicker = ref(false)
const codeInfo = ref([])
const formRef = ref({
    code: '',
    name: '',
    account: '',
    bank: "",
    remark: "",
    codeName: ''
})
onMounted(async () => {
    const { list } = await GetPaymentCodeApi({ page: 1, limit: 1000 })
    codeInfo.value = list
})

watch(() => props.item, () => {
    formRef.value = props?.item
    formRef.value.codeName = props?.item.title;
})

function submitAdd() {
    EditReportApi(formRef.value).then(() => {
        showSuccessToast({
            message: '修改成功',
            duration: 1000
        })
        emit('confirm')
        closeModal()
    })
}

function onPickerComfirm({ selectedValues, selectedOptions }) {
    formRef.value.codeName = selectedOptions[0].title
    formRef.value.code = selectedValues[0]
    showPicker.value = false
}

function closeModal() {
    emit('close')
}
</script>
<style scoped>
.delete-button {
    height: 100%;
}

:deep(.van-uploader__wrapper) {
    justify-content: center !important;
}

:deep(.van-popover__wrapper) {
    display: block;
}

/* input::placeholder {
    font-size: 12px;
  } */
</style>